<template>
  <div class="wrapper">
    <div class="content">
      <swiper-pic :list="swiperLists"></swiper-pic>
      <h-scroll :h_itemlists="h_itemlists"></h-scroll>
      <gallery :galleryLists="galleryLists"></gallery>
      <c-scroll
        v-for="(card, index) of c_cardLists"
        :title="card.title"
        :subtitle="card.subtitle"
        :c_cardLists="card.games"
        :key="index"
      ></c-scroll>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
import SwiperPic from "@/components/swiper/swiper-pic/swiper-pic";
import HScroll from "./h-scroll";
import CScroll from "@/components/c-scroll/c-scroll.vue";
import Gallery from "@/components/gallery/gallery";
import axios from "axios";
import ObserveDom from "@better-scroll/observe-dom";
Bscroll.use(ObserveDom);
export default {
  name: "dis_content",
  components: {
    SwiperPic,
    HScroll,
    CScroll,
    Gallery,
  },
  data() {
    return {
      swiperLists: [],
      h_itemlists: [],
      galleryLists: [],
      c_cardLists: [],
    };
  },
  methods: {
    async getDiscoveryData() {
      let res = await axios.get("/api/discovery.json");
      res = res.data;
      if (res.ret && res.data) {
        const result = res.data;
        this.swiperLists = result.swiperLists;
        this.h_itemlists = result.h_itemlists;
        this.galleryLists = result.galleryLists;
        this.c_cardLists = result.c_cardLists;
      }
    },
  },
  mounted() {
    this.getDiscoveryData().then(() => {
      this.scroll = new Bscroll(".wrapper", {
        click: true,
        scrollX: true,
        scrollY: true,
        scrollbar: true,
        observeDOM: true,
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  margin-top: 10vh;
  height: 82vh;
}
</style>
